<template>
  <div class="search">
    <div>
      <van-nav-bar title="搜索" arrow-left left-arrow @click-left="onClickLeft" />

      <van-search v-model="value" show-action placeholder="520元礼包抢先领" @search="myKeydown" />

      <div class="hotsearch" v-show="isShow">
        <p>热门搜索</p>
        <p>520元礼包抢先领</p>
      </div>
      <div class="classm">
        <p v-show="classm" v-for="(item, index) in Price" :key="index" :class="{ active: currentIndex === index }"
          @click="classmtext1(index)">
          {{ item }}
        </p>
      </div>
      <div class="detail">
        <div class="classms9" v-for="(item, index) in filterCategoryList" :key="index" v-show="classshow">
          <p>{{ item.name }}</p>
        </div>
        <div class="classms9s">
          <div v-for="(item, index) in list" :key="index" @click="routervalue(item.id)">
            <img :src="item.picUrl" alt="" />
            <p>{{ item.name }}</p>
            <p>¥ {{ item.retailPrice }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { service } from "../api/config";
export default {
  name: "search",
  setup() {
    const value = ref("");

    return {
      value,
    };
  },
  data() {
    return {
      isShow: true,
      classm: false,
      Price: ["综合", "价格", "分类"],
      currentIndex: 0,
      list: [],
      sort: "add_time",
      order: "desc",
      filterCategoryList: [],
      classshow: false,
    };
  },
  methods: {
    routervalue(id) {
      this.$store.commit('setValueDetail', id)
      this.$router.push("/shopping");
    },
    onClickLeft() {
      this.$router.push("/");
    },

    classmtext1(index) {
      this.currentIndex = index;
      if (index == 1) {
        this.sort = "retail_price";
        this.order = "asc";
        this.classshow = false;

      }
      if (index == 0) {
        this.sort = "add_time";
        this.order = "desc";
        this.classshow = false;
      }
      if (index == 2) {
        this.classshow = !this.classshow
      }
      console.log(index);
      this.myKeydown();
    },
    myKeydown() {
      console.log(this.value);
      this.isShow = false;
      this.classm = true;
      service.get("/wx/goods/list", {
        params: {
          keyword: this.value,
          sort: this.sort,
          order: this.order
        }
      }).then(res => {
        console.log(res);
        this.list = res.data.data.list;
        this.filterCategoryList = res.data.data.filterCategoryList;
      })

    },
  },
};
</script>

<style scoped>
html {
  font-size: 0.2487vw;
}

.active {
  color: red;
}

.search {
  width: 100%;
  height: 100%;
  background-color: #f2f3f3;
  margin-bottom: 51px;
}

::before {
  color: black;
}

.van-nav-bar__title.van-ellipsis {
  font-size: 15rem;
}

.hotsearch {
  background-color: #fff;
  border-top: 1rem solid #f2f3f3;
  padding-bottom: 10rem;
  padding-left: 10rem;
}

.hotsearch p:nth-child(1) {
  margin-top: 0rem;
  font-size: 17rem;
  /* padding-left: 10rem; */
  padding-top: 15rem;
  padding-bottom: 10rem;
}

.hotsearch p:nth-child(2) {
  width: 110rem;
  font-size: 14rem;
  border: 1rem solid #727171;
  text-align: center;
  padding-left: 5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: 5rem;
  color: #727171;
}

.classm p {
  font-size: 15rem;
  display: inline-block;
  margin-top: 10rem;
  margin-bottom: 10rem;
}

.classm {
  border-top: 1rem solid #f2f3f3;
  background-color: #fff;
  display: flex;
  justify-content: space-evenly;
}

.detail {
  position: relative;
}

.classms9 {
  width: 100%;
  z-index: 5;
  position: absolute;
  width: 100%;
  height: 80px;
  background-color: #fff;
  border-top: 1rem solid #f2f3f3;
  border-bottom: 1px solid #f2f3f3;

}

.classms9 p {
  border: 1px solid #727171;
  color: #727171;
  width: 12%;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  margin-top: 20px;
  margin-left: 20px;
}

.classms9s {
  display: flex;
  flex-wrap: wrap;
}

.classms9s div {
  /* display: flex;
    flex-wrap: wrap; */
  width: 49%;
  background-color: #fff;
  margin-top: 1px;
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 1px;
  z-index: 1;
}

.detail div img {
  width: 100%;
}

.detail p:nth-child(2) {
  font-size: 15rem;
  text-align: center;
  padding-bottom: 10px;
}

.detail p:nth-child(3) {
  font-size: 14rem;
  text-align: center;
  color: #9d4648;
  padding-bottom: 10px;
}
</style>